<template>
  <div>
    <!-- operaList为增和改的模态框内容 -->
    <!-- tableList为表格的列内容 -->
    <!-- tableData为表格数据 -->
    <!-- res为接口返回值 -->
    <table-content
    :operaList="operaList"
    :tableList="tableList"
    :tableData="tableData"
    :res="res"
    :Total="Total"
    @searchData="searchData"
    @getData="getData"
    @deleteData="deleteData"
    @addData="addData"
    @editData="editData"
    >
      <!--  -->
      <template slot="navBar">
    <el-select v-model="method" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </template>
    </table-content>
  </div>
</template>

<script>
import qs from 'qs'
import '@/mock/default.js'
import { tableMix } from '@/mixin/tableMix.js'
import {
  addApi,
  getApi,
  findAllApi,
  updateApi,
  deleteApi
} from '@/api/power/api.js'
import { apiOperaList as operaList } from '@/assets/staticData/operaList.js'
import { apiTableList as tableList } from '@/assets/staticData/tableList.js'
export default {
  name: '',
  components: {},
  props: {},
  mixins: [tableMix], // 一些公用的属性方法可以放在mixin里面,各个组件互不影响
  data () {
    return {
      res: '',
      method: '',
      other: {},
      value: '',
      page: '',
      per_page: '',
      search: '',
      options: [{
        value: '',
        label: '全部'
      }, {
        value: 'GET',
        label: 'GET'
      }, {
        value: 'POST',
        label: 'POST'
      }, {
        value: 'PUT',
        label: 'PUT'
      }, {
        value: 'DELETE',
        label: 'DELETE'
      }]
    }
  },
  computed: {},
  watch: {},
  created () {
    this.AllData()
  },
  mounted () {},
  methods: {
    searchData (data, page, perpage) {
      this.operaList = operaList
      this.tableList = tableList
      this.page = page + ''
      this.per_page = perpage + ''
      const payload = {key: data, method: this.method, page: page, per_page: perpage}
      getApi(payload).then(res => {
        this.res = res
        this.tableData = res.data.data.Api
        this.Total = res.data.data.Total
      })
    },
    addData (data) {
      addApi(qs.stringify(data)).then(res => {
        this.getData(data)
        this.res = res
        if (res.data.code === 1020) {
          console.log('已存在')
        } else {
          console.log('插入成功')
        }
      })
        .catch(Error => {
          console.log('err:', Error)
        })
    },
    editData (_id, data) {
      updateApi(_id, data).then(res => {
        this.getData(data)
        this.res = res
      })
    },
    AllData () {
      this.operaList = operaList
      this.tableList = tableList
      findAllApi().then(res => {
        this.res = res
        this.tableData = res.data.data.Api
        this.Total = res.data.data.Total
      })
    },
    getData (data) {
      this.operaList = operaList
      this.tableList = tableList
      this.searchData(data.key, data.page, data.per_page)
    },
    deleteData (data) {
      deleteApi(data).then(res => {
        this.getData(data)
        this.res = res
      })
    }
  }
}
</script>

<style scoped>
</style>
